import React, { Component } from 'react';
import service from '../../api'
import './Order.scss'
import { NavBar, Tag, Ellipsis, Button, NumberKeyboard, PasscodeInput, Toast } from 'antd-mobile';
import { connect } from 'react-redux';
import { RightOutline } from 'antd-mobile-icons'
class Order extends Component<any, any> {
    constructor(props: any) {
        super(props)
        this.state = {
            orderlist: [],
            sum: 0,
            error: false,
            show: false,
            value:''
            
        }
    }
    componentDidMount(): void {
        console.log(this.props.match.params.time)
        var time = this.props.match.params.time
        var userid = localStorage.getItem('userid')
        service.order.confirmOrder({ userid, time }).then(res => {
            console.log(res)
            this.setState({
                orderlist: res.data.data
            }, () => {
                var arr = this.state.orderlist
                var sum = arr.reduce((sum: number, item: any) => {
                    return sum += Math.ceil(item.discount * item.originprice / 10) * item.num
                }, 0)
                this.setState({
                    sum
                })
            })
        })
    }
    show() {
        this.setState({
            show: true
        })
    }
    back() {
        this.props.history.replace('/index/cart')
    }
    toEdit() {
        this.props.history.push({ pathname: '/addresslist', state: { time: this.props.match.params.time } })
    }
    onChange(val: string) {
        this.setState({
            value:val
        })
        if (val.length === 6 && val === '666666') {
            this.setState({
                error: false,
                show: false
            })
            service.order.deleteCartItem({userid:localStorage.getItem('userid')}).then(res=>{
                console.log(res)
                if(res.data.code==='200'){
                    Toast.show({
                        icon: 'success',
                        content: '支付成功',
                      })
                      setTimeout(()=>{
                        this.props.history.replace('/orderend')
                      },1000)
                }
            })
            
        }
        else if(val.length === 6 && val !== '666666'){
            this.setState({
                error: true,
                value:''
            })
            Toast.show({
                content:'密码错误'
            })
        }
    }
    render() {
        return (
            <div className='order'>
                <header>
                    <NavBar onBack={() => { this.back() }}>订单列表</NavBar>
                </header>
                <div className='address'>
                    <div>
                        <h4>{this.props.address.name} <span>{this.props.address.tel}</span></h4>
                        <p>{this.props.address.province + this.props.address.city + this.props.address.county} <span>{this.props.address.addressDetail}</span></p>
                    </div>
                    <RightOutline onClick={() => { this.toEdit() }} />
                </div>
                <main>


                    {
                        this.state.orderlist.map((item: any, index: number) => {
                            return (
                                <div className="pro" key={index}>
                                    <img src={item.img1} alt="" />
                                    <div className="pror">
                                        <Ellipsis direction='end' rows={2} content={item.proname} />
                                        <div className='price'>
                                            <span>￥{Math.ceil(item.discount * item.originprice / 10)}</span>
                                            <span>X{item.num}</span>
                                        </div>
                                    </div>
                                </div>
                            )
                        })
                    }

                </main>
                <footer>
                    <span>合计: <span>￥<strong>{this.state.sum}</strong></span> </span>
                    <Button shape='rounded'
                        color='danger'
                        style={{ width: '120px' }}
                        onClick={() => { this.show() }}
                    >去支付</Button>
                </footer>
                <>
                    {
                        this.state.show ? <div className="password">
                            <PasscodeInput error={this.state.error} onChange={(val) => { this.onChange(val) }} value={this.state.value} seperated style={{ '--cell-gap': '21px' }} keyboard={<NumberKeyboard visible={this.state.show} />} />
                        </div> : <></>
                    }
                </>

            </div>
        );
    }
}

export default connect(
    (state: any) => {
        return {
            address: state.address
        }
    },

)(Order);